<template>
	<view class="xqtj">
		<div class="xqtj_item" :class="index === 1 ? 'cyan' : ''" v-for="(item, index) in list" :key="index">
			<div class="percentage">
				<span class="number">{{ item.value }}</span>
				%
			</div>
			<div class="category">{{ item.label }}</div>
		</div>
	</view>
</template>

<script>
import { listYQNEED, listJRNEED, getNum } from '@/api/zhyp/statistics';
export default {
	data() {
		return {
			list: [],
			code: '6103'
		};
	},
	created() {
		this.getData();
	},
	methods: {
		//供需信息
		async getData() {
			const queryData = {
				status: 2,
				isPublish: 1
			};
			const yqxq = await listYQNEED(queryData);
			const jrxq = await listJRNEED(queryData);
			const cgxq = await getNum();
			this.list = []
			this.list.push({
				value: ((yqxq.total / (yqxq.total + jrxq.total + cgxq.cgxqsum)) * 100).toFixed(2),
				label: '仪器需求'
			});
			this.list.push({
				value: ((jrxq.total / (yqxq.total + jrxq.total + cgxq.cgxqsum)) * 100).toFixed(2),
				label: '金融需求'
			});
			this.list.push({
				value: ((cgxq.cgxqsum / (yqxq.total + jrxq.total + cgxq.cgxqsum)) * 100).toFixed(2),
				label: '成果需求'
			});
		}
	}
};
</script>

<style lang="scss">
.xqtj {
	padding-top: 32rpx;
	width: 100%;
	height: 180rpx;
	display: flex;
	justify-content: space-around;
	.xqtj_item {
		cursor: pointer;
		height: 100%;
		width: 180rpx;
		aspect-ratio: 1;
		background-image: url(/static/largeDataScreenImg/xqtj_blue_bg.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center bottom;
		color: #fff;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: center;
		&.cyan {
			background-image: url(/static/largeDataScreenImg/xqtj_cyan_bg.png);
		}
		.percentage {
			margin-bottom: 8rpx;
			.number {
				font-size: 36rpx;
				font-weight: 700;
			}
		}
		// .category{
		// 	font-size: 28rpx;
		// }
	}
}
</style>
